<template>
	<view class="searchListWp">
		<view class="searchBox">
			<view class="inputWp">
				<u--input placeholder="请输入内容" border="surround" v-model="searchVal" @confirm="searchList(searchVal)"
					@change="searchList(searchVal)" shape='circle' inputAlign='center' suffixIcon='search'
					suffixIconStyle="font-size: 20px;color:#7B77FE" autoface></u--input>
			</view>
		</view>
		<view class="showWp">
			<view class="showItemWp">
				<view class="goods" v-for="(item,index) in list" :key="item.id">
					<view class="goodsItem" @click="goToDetail(item)">
						<view class="goodsItemImgWp">
							<img class='productIcon' v-if="item.icon" :src="item.icon" mode=""></img>
						</view>
						<view class="goodsTitleWp">
							<view class="goodsTitle">
								{{item.category?item.category:''}}---{{item.name?item.name:''}}
							</view>
							<view class="moreWp">
								<img src="https://file.casugn.com/storecompcard/temp/更多的@2x(1)_1655372163640.png"
									class='moreImg' alt="">
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {

		},
		data() {
			return {
				searchVal: '',
				openId: '',
				list: []
			}
		},
		onLoad() {
			let data = uni.getStorageSync('openId')
			if (data.openid) {
				this.openId = data.openid
			}
		},
		onShow() {

		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			async searchList(val) {
				console.log(val);
				if (!val) {
					return
				}
				let res = await this.$api.queryListByCondition({
					name: val,
					isDel: 0,
					openId: this.openId,
					companyId: this.userInfo.companyId ? this.userInfo.companyId : ''
				})
				if (res.success && res.result.length) {
					console.log(res.result);
					this.list = res.result
				} else {
					this.list = []
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}

			},
			//去详情
			goToDetail(item) {
				console.log(item, '去详情');
				uni.navigateTo({
					url: '/pagesCard/productDetail/productDetail?id=' + item.detailId
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.searchListWp {
		background-color: #F8F9FF;
		padding: 30upx;
		height: 100vh;

		.searchBox {
			display: flex;
			padding: 30upx 0;
			align-items: center;

			.inputWp {
				flex: 1;
			}

			.more {
				background-color: #E8EFF9;
				width: 60upx;
				height: 60upx;
				border-radius: 30%;
				margin-left: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 30upx;
					height: 30upx;
				}
			}
		}

	}

	.showWp {
		.showItemWp {
			padding: 30upx 0;
			// display: flex;
			align-items: center;
			// border-bottom: 1upx solid #ccc;

			.showItem {

				display: flex;
				align-items: center;

				.leftWp {
					margin-right: 20upx;

					//头像
					img {
						width: 80rpx;
						height: 80upx;
						border-radius: 50%;
					}

					.personInfo {}
				}

				.rightWp {
					display: flex;

					.bussinessImg {
						width: 200upx;
						height: 150upx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.bussinessInfo {}
				}
			}
		}
	}

	.goods {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		height: 110upx;
		box-shadow: 2px 1px 4px 0px rgba(66, 60, 254, 0.4);
		border-radius: 20upx;
		margin: 20upx 20upx 20upx 0;
		padding-left: 20upx;

		// &+.goods {
		// 	margin-top: 16rpx;
		// }
		.goodsItem {
			display: flex;

			.goodsItemImgWp {
				padding-right: 40upx;
				width: 100upx;

				.productIcon {
					width: 77upx;
					height: 77upx;
				}

			}

			.goodsTitleWp {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.goodsTitle {
					flex: 1;
					text-align: left;
					font-size: 34upx;
					font-weight: 400;
					color: #333333;
					line-height: 36upx;
					overflow: hidden;
				}

				.moreWp {
					.moreImg {
						width: 13upx;
						height: 21upx;
					}
				}
			}

		}
	}
</style>
<style lang="scss">
	.tabWp {
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 40upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 9px 1px rgba(92, 87, 254, 0.2);
		border-radius: 20upx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.tabItem {
			flex: 1;
			text-align: center;
			margin: 14upx 0;
			border-radius: 20upx;

			.title {
				font-size: 30upx;
				font-weight: 400;
				padding: 22upx;
			}
		}

		.activityItem {
			background-color: #423BFE;
			color: #FFFFFF;
		}
	}

	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #EEEEEE;
		padding: 41upx 30upx 47upx;
		position: relative;

		.active-status {
			position: absolute;
			width: 140upx;
			height: 130upx;
			top: 38upx;
			right: 29upx;

			img {
				width: 140upx;
				height: 130upx;
			}
		}

		.active-time-box {
			width: 690upx;
			height: 100upx;
			background: #FFFFFF;
			border: 1upx solid #413BF3;
			box-shadow: 0upx 3upx 10upx 0upx rgba(65, 59, 243, 0.1000);
			border-radius: 20upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 100upx;
			text-align: center;
			margin-bottom: 30upx;
		}

		.active-head {
			display: flex;
			letter-spacing: 3upx;

			.head-img {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;

				img {
					width: 72upx;
					height: 72upx;
					margin-top: 1upx;
				}
			}

			.active-name-info {
				margin-left: 21upx;

				.active-name {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.active-introduce {
					margin-top: 19upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 400upx;
				}
			}
		}

		.active-title {
			letter-spacing: 3upx;
			margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;

			.active-text {
				color: #000000;
			}
		}

		.active-content {
			line-height: 48upx;
		}

		.active-info-img {
			margin: 0 auto;
			margin-top: 30upx;
			width: 690upx;
			height: 350upx;
			border-radius: 30upx;
			position: relative;
			overflow: hidden;

			img {
				width: 690upx;
				height: 350upx;
			}

			.active-info-mask {
				position: absolute;
				width: 690upx;
				height: 70upx;
				bottom: 0;
				background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
				line-height: 70upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.active-address {
			margin-top: 30upx;
			letter-spacing: 3upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.active-address-right {
				.active-address-address {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #413BF3;
					margin-right: 20upx;
					position: relative;
					top: -2upx;
				}

				img {
					width: 21upx;
					height: 24upx;
				}
			}
		}
	}
</style>